<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <style>
            #canvas {
                position: absolute;
                margin: auto;
                right: 0;
                left: 0;
                top: 100px;
                border: 1px solid #ccc;
                transform: translateZ(0);
            }
        </style>
        <title>Document</title>
    </head>

    <body>
        <canvas id="canvas" width="800" height="450"></canvas>

        <script>
            const canvas = document.getElementById('canvas');
            const context = canvas.getContext('2d');

            // 设置透明度
            let par = 0;
            // 圆心坐标
            const center = [400, 225];
            // 线长度和距离圆心距离
            const length = 10,
                offset = 10;

            context.lineWidth = 4;
            context.lineCap = 'round';

            setInterval(() => {
                par -= 0.15;
                par = par <= 0 ? 0.85 : par;
            }, 300);

            const myloop = loop();
            drwa();
            // 注意在绘制函数当中不能修改变量的值    如果实在需要改动则应该使用拷贝值
            // 如果修改变量的值   那么实际的显式效果会收到帧数的影响
            function drwa() {
                context.clearRect(0, 0, 800, 450);
                let c = par;
                for (var angle = 0; angle < 360; angle += 45) {
                    // 8次
                    c += 0.15;
                    c = c > 1 ? c - 1 : c;
                    var sin = Math.sin((angle / 180) * Math.PI);
                    var cos = Math.cos((angle / 180) * Math.PI);
                    context.beginPath();
                    context.moveTo(center[0] + offset * cos, center[1] + offset * sin);
                    context.lineTo(
                        center[0] + (offset + length) * cos,
                        center[1] + (offset + length) * sin
                    );
                    context.strokeStyle = 'rgba(0,0,0,' + c + ')';
                    context.stroke();
                }
                context.fillText(`FPS: ${myloop()}`, 10, 20);
                requestAnimationFrame(drwa);
            }

            function loop() {
                let lastTime = Number(new Date());
                let ticks = 0;
                let FPS = 0;
                return function () {
                    const time = Number(new Date());
                    if (time - lastTime >= 1000) {
                        lastTime = time;
                        FPS = ticks;
                        ticks = 0;
                    } else {
                        ticks++;
                    }
                    return FPS;
                };
            }
        </script>
    </body>
</html>
